<template>
  <div>
    <a
      href="https://github.com/alphardex/shiro"
      target="_blank"
      class="github-corner"
      aria-label="View source on GitHub"
    >
      <svg
        width="80"
        height="80"
        viewBox="0 0 250 250"
        style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
        aria-hidden="true"
      >
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
        <path
          d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
          fill="currentColor"
          style="transform-origin: 130px 106px;"
          class="octo-arm"
        />
        <path
          d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
          fill="currentColor"
          class="octo-body"
        />
      </svg>
    </a>
    <h1 class="title">Shiro</h1>
    <p class="intro">Shiro，是alphardex平时所做的CSS创意作品集</p>
    <div class="center">
      <div class="search-bar">
        <input
          type="search"
          name="keyword"
          id="search"
          class="balloon"
          placeholder="如button, hover, staggered等"
          v-model="keyword"
          autocomplete="off"
        />
        <label for="search">标签</label>
      </div>
    </div>
    <div class="gallery">
      <Card
        v-for="art in searchResult"
        :title="art.title"
        :description="art.description"
        :tags="art.tags"
        :key="art.title"
      ></Card>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import Card from "@/components/Card.vue";
import arts from "@/arts";

interface Art {
  title: string;
  description: string;
  tags: string[];
}

@Component({
  components: {
    Card
  }
})
export default class Home extends Vue {
  @Provide() arts: Art[] = arts;
  @Provide() keyword: string = "";
  get searchResult() {
    return this.keyword
      ? this.arts.filter(art => art.tags.includes(this.keyword.toLowerCase()))
      : this.arts;
  }
}
</script>

<style lang="scss">
@import "@/styles/_mixin.scss";

.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out;
}

@keyframes octocat-wave {
  0%,
  100% {
    transform: rotate(0);
  }
  20%,
  60% {
    transform: rotate(-25deg);
  }
  40%,
  80% {
    transform: rotate(10deg);
  }
}

@media (max-width: 500px) {
  .github-corner:hover .octo-arm {
    animation: none;
  }
  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
  }
}

.title {
  color: #172530;
  text-align: center;
  font-size: 4em;
}

.intro {
  color: #0b2438;
  text-align: center;
  font-size: 1.2em;
  line-height: 1.6em;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em 0;
}

.search-bar {
  position: relative;

  .balloon {
    @include pc-layout {
      width: 45vw;
    }

    @include sp-layout {
      width: 60vw;
    }

    padding: 10px 0 10px 15px;
    text-indent: 60px;
    color: #4fc1e9;
    background: #efefef;
    border: none;
    border-radius: 3px;
    outline: none;
    transition: 0.3s ease-in-out;

    &::placeholder {
      text-indent: 0;
      color: #efefef;
    }

    & + label {
      position: absolute;
      top: 8px;
      left: 0;
      bottom: 8px;
      padding: 5px 15px;
      font-size: 11px;
      font-weight: 700;
      text-shadow: 0 1px 0 rgba(19, 74, 70, 0);
      border-radius: 3px;
      transition: 0.3s ease-in-out;

      // arrow
      &:after {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        top: 100%;
        left: 50%;
        margin-left: -3px;
        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        border-top: 3px solid rgba(122, 184, 147, 0);
        transition: 0.3s ease-in-out;
      }
    }

    &:focus,
    &:active {
      color: #4fc1e9;
      text-indent: 0;

      &::placeholder {
        color: #aaa;
      }

      & + label {
        color: white;
        text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
        background: #4fc1e9;
        transform: translateY(-40px);

        &:after {
          border-top: 4px solid #4fc1e9;
        }
      }
    }
  }
}

.gallery {
  display: grid;
  // 自适应列数，每列的宽度最小为25个字符宽度，最大为1fr的大小（即等分宽度）
  grid-template-columns: repeat(auto-fill, minmax(25ch, 1fr));
  grid-gap: 2rem;
  margin: 0 6rem 3rem 6rem;
  padding-top: 2.5rem;
}
</style>
